<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title="Navs" 
      description="The essential navbar component in pure semantic HTML."
      canonical="navs.html"
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active="navs-link"}
      
      <div role="document">
        <section id="navs">
          <hgroup>
            <h1>Navs</h1>
            <h2>The essential navbar component in pure semantic HTML.</h2>
          </hgroup>
          <article aria-label="Nav example">
            <nav>
              <ul>
                <li><strong>Brand</strong></li>
              </ul>
              <ul>
                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                <li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
              </ul>
            </nav>
            <footer class="code">

<pre><code>&lt;<b>nav</b>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Button&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>

            </footer>
          </article>
          <p><code>&lt;<b>ul</b>&gt;</code> are automatically distributed horizontally.</p>
          <p><code>&lt;<b>li</b>&gt;</code> are unstyled and inlined.</p>
          <article aria-label="Nav example">
            <nav>
              <ul>
                <li>
                  <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
                    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <line x1="3" y1="12" x2="21" y2="12">
                      </line><line x1="3" y1="6" x2="21" y2="6">
                      </line><line x1="3" y1="18" x2="21" y2="18">
                      </line>
                    </svg>
                  </a>
                </li>
              </ul>
              <ul>
                <li><strong>Brand</strong></li>
              </ul>
              <ul>
                <li>
                  <a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
                    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                    </svg>
                  </a>
                </li>
              </ul>
            </nav>
            <footer class="code">

<pre><code>&lt;<b>nav</b>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
  &lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>

            </footer>
          </article>
          <p>Inside <code>&lt;<b>aside</b>&gt;</code>, navs are stacked vertically.</p>
          <article aria-label="Vertical nav example">
            <aside>
              <nav>
                <ul>
                  <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                  <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                  <li><a href="#" onclick="event.preventDefault()">Link</a></li>
                </ul>
              </nav>
            </aside>
            <footer class="code">

<pre><code>&lt;<b>aside</b>&gt;
  &lt;<b>nav</b>&gt;
    &lt;<b>ul</b>&gt;
      &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
      &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
      &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
    &lt;/<b>ul</b>&gt;
  &lt;/<b>nav</b>&gt;
&lt;/<b>aside</b>&gt;</code></pre>

          </footer>
        </article>

        <p>With <code><i>aria-label</i>=<u>"breadcrumb"</u></code>, you can turn a nav into a breadcrumb.</p>

        <article aria-label="Breadcrumb example">
          <nav aria-label="breadcrumb">
            <ul>
              <li>
                <a href="#" onclick="event.preventDefault()">Home</a>
              </li>
              <li>
                <a href="#" onclick="event.preventDefault()">Category</a>
              </li>
              <li>Page</li>
            </ul>
          </nav>

          <footer class="code">

<pre><code>&lt;<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>&gt;
  &lt;<b>ul</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Home&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
    &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Category&lt;<b>/a</b>&gt;&lt;<b>/li</b>&gt;
    &lt;<b>li</b>&gt;Page&lt;<b>/li</b>&gt;
  &lt;<b>/ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>

          </footer>
        </article>

      </section>

      ${require('./_footer.html')}

    </div>
  </main>
  <script src="js/commons.min.js"></script>
</body>

</html>